<template>
  <div class="login-container" ref="loginContainerRef">
    <div class="login-box">
      <!-- 抖音风格头部 -->
      <div class="title-section">
        <div class="logo">
          <div class="music-note note1">♪</div>
          <div class="music-note note2">♪</div>
        </div>
        <h1 class="app-name">Starlight Whisper</h1>
        <p class="subtitle">愿这里的星光与文字，带给您片刻的宁静与力量</p>
      </div>

      <!-- 登录表单 -->
      <form class="login-form" @submit.prevent="handleLogin">
        <div class="form-group">
          <input
            type="text"
            v-model="loginForm.username"
            placeholder="手机号/邮箱/用户名"
            class="form-input"
          />
        </div>
        <div class="form-group">
          <input
            type="password"
            v-model="loginForm.password"
            placeholder="请输入密码"
            class="form-input"
          />
        </div>

        <div class="login-options">
          <a href="#" class="forgot-password">忘记密码?</a>
        </div>

        <button type="submit" class="login-button" :disabled="isLoading">
          <span v-if="!isLoading">登录</span>
          <div v-else class="loading-spinner"></div>
        </button>
      </form>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  computed: {
    ...mapState("loginUser", ["isLoading"]),
  },
  methods: {
    async handleLogin() {
      if (!this.loginForm.username || !this.loginForm.password) {
        this.$showMessage({
          content: "请输入账号和密码",
          type: "warn",
          container: this.$refs.loginContainerRef,
        });
        return;
      }
      const res = await this.$store.dispatch("loginUser/login", this.loginForm);
      if (res) {
        this.$showMessage({
          content: "登录成功",
          type: "success",
          container: this.$refs.loginContainerRef,
        });
        this.$router.push({
          name: "Home",
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
@import "@/styles/var.less";

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  position: relative;
  overflow: hidden;
  color: #fff;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at 10% 20%,
        rgba(255, 0, 128, 0.1) 0%,
        transparent 20%
      ),
      radial-gradient(
        circle at 90% 80%,
        rgba(0, 200, 255, 0.1) 0%,
        transparent 20%
      );
    z-index: 0;
  }
}

.login-box {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 40px 30px;
  z-index: 1;

  .title-section {
    text-align: center;
    margin-bottom: 40px;

    .logo {
      position: relative;
      width: 80px;
      height: 80px;
      margin: 0 auto 20px;

      .music-note {
        position: absolute;
        font-size: 30px;
        color: #fff;
        animation: float 3s ease-in-out infinite;

        &.note1 {
          top: 10px;
          left: 15px;
          color: #ff0080;
          animation-delay: 0s;
        }

        &.note2 {
          bottom: 10px;
          right: 15px;
          color: #00c8ff;
          animation-delay: 1.5s;
        }
      }

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 3px solid transparent;
        border-radius: 50%;
        background: linear-gradient(45deg, #ff0080, #00c8ff) border-box;
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask: linear-gradient(#fff 0 0) padding-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
      }
    }

    .app-name {
      font-size: 32px;
      font-weight: 700;
      margin: 0 0 10px;
      background: linear-gradient(45deg, #ff0080, #00c8ff);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 2px;
    }

    .subtitle {
      font-size: 16px;
      color: #aaa;
      margin: 0;
    }
  }

  .login-form {
    .form-group {
      margin-bottom: 20px;

      .form-input {
        box-sizing: border-box;
        width: 100%;
        padding: 16px 20px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        color: #fff;
        font-size: 16px;
        transition: all 0.3s ease;

        &::placeholder {
          color: #777;
        }

        &:focus {
          outline: none;
          border-color: #ff0080;
          background: rgba(255, 255, 255, 0.12);
          box-shadow: 0 0 0 2px rgba(255, 0, 128, 0.2);
        }
      }
    }

    .login-options {
      text-align: right;
      margin-bottom: 25px;

      .forgot-password {
        color: #00c8ff;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s ease;

        &:hover {
          color: #ff0080;
          text-decoration: underline;
        }
      }
    }

    .login-button {
      width: 100%;
      padding: 16px;
      background: linear-gradient(45deg, #ff0080, #00c8ff);
      border: none;
      border-radius: 8px;
      color: white;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255, 0, 128, 0.4);
      }

      &:disabled {
        opacity: 0.7;
        cursor: not-allowed;
      }
    }
  }

  .other-login {
    margin: 30px 0;

    .divider {
      display: flex;
      align-items: center;
      text-align: center;
      color: #777;
      font-size: 14px;
      margin-bottom: 25px;

      &::before,
      &::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      }

      &::before {
        margin-right: 15px;
      }

      &::after {
        margin-left: 15px;
      }
    }

    .social-login {
      display: flex;
      justify-content: center;
      gap: 30px;

      .social-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.1);
        }

        i {
          font-size: 24px;
        }

        &.wechat {
          background: #28c445;
        }

        &.qq {
          background: #12b7f5;
        }

        &.weibo {
          background: #e6162d;
        }
      }
    }
  }

  .login-footer {
    .register {
      text-align: center;
      margin-bottom: 20px;
      color: #aaa;

      .register-link {
        color: #00c8ff;
        text-decoration: none;
        transition: color 0.3s ease;

        &:hover {
          color: #ff0080;
          text-decoration: underline;
        }
      }
    }

    .agreement {
      display: flex;
      align-items: flex-start;
      font-size: 13px;
      color: #777;

      input {
        margin-right: 8px;
        margin-top: 2px;
      }

      a {
        color: #00c8ff;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

.bottom-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  overflow: hidden;
  z-index: 0;

  .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 60px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" fill="rgba(255,0,128,0.1)"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25"></path><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5"></path><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"></path></svg>')
      no-repeat;
    background-size: 50% 100%;
    animation: wave 10s linear infinite;
  }
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

// 响应式设计
@media (max-width: 480px) {
  .login-box {
    padding: 30px 20px;
    margin: 0 15px;

    .title-section {
      .app-name {
        font-size: 28px;
      }
    }

    .other-login .social-login {
      gap: 20px;

      .social-icon {
        width: 45px;
        height: 45px;
      }
    }
  }
}
</style>
